<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            list-style: none;
            margin: 0px;
        }
        .a11{
            border-bottom: 1px solid skyblue;
            height: 60px;
        }
        .a22{
            width: 1200px;
            height: 508px;
            margin: 25px auto;
        }
        .a33{
            height: 36px;
            width: 1209px;
            margin: 0px auto;
        }
        .a44{
            width: 1209px; 
            height: 1000px;
            margin: 25px auto 12px;
        }
        .txt{
            text-align: center;
            line-height: 35px;
            margin: 12px auto 0px;
            width: 1209px;
            height: 35px;
        }
        .a11 .left{
            float: left;
            margin-top: 26px;
            margin-left: 33px;
        }
        .a11 ul{
            margin-left: 257px;
            float: left;
            margin-top: 15px;
        }
        .a11 .right{
            float: right;
        }
        .a11 li{
            float: left;
            background-color: tomato;
            border-radius: 205px;
            color: rgb(243, 230, 47);
            margin: 15px 0px 0px 25px;
            padding: 8px;

        }
        .a22 .left{
            float: left;
            width: 909px;
        }
        .a22 .b11{
            width: 290px;
            float: right;
        }
        .a22 .b11 li{
            width: 290px;
            height: 170px;
            margin-bottom: 12px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        .a22 .b11 p{
            width: 290px;
            height: 30px;
            position: absolute;
            bottom: 107px;
            left: 1077px;
            line-height: 30px;
            background: rgb(229, 233, 31);
        }
        .a22 .b11 .a1{
            width: 290px;
            height: 30px;
            position: absolute;
            top: 225px;
            left: 1077px;

        }
        .a22 .b11 .a2{
            width: 290px;
            height: 30px;
            position: absolute;
            top: 425px;
            left: 1077px;
        }
        .a22 .b11 img{
            width: 290px;
        }
        .a33 .b22{
            width: 122px;
            height: 35px;
            float: left;
            padding: 1px 1px 1px 1px;
            border: solid red;
            color: red;
            line-height: 30px;
        }
        .a33 .b33{
            width: 120px;
            height: 38px;
            padding: 1px 1px 1px 1px;
            margin-left: 16px;
        }
        .a33 .b44{
            width: 120px;
            float: left;
            height: 33px;
            border: solid red;
            padding: 1px 1px 1px 1px;
            margin-left: 18px;
            line-height: 30px;
        }
        .a44 li{
            width: 289px;
            height: 315px;
            border-bottom: 1px solid tomato;
            background: wheat;
            float: left;
            margin-right: 16px;
        }
        .a44 p{
            margin: 15px 15px;
        }
        .a44 img{
            width: 289px;
        }
        .a44 li:nth-of-type(4n){
            margin-right: 0px;
        }
        .a44 p:nth-of-type(1){
            height: 42px;
        }
        .a44 span:nth-of-type(1){
            float: left;
            
        }
        .a44 span:nth-of-type(2){
            margin-left: 120px;
            float: right;
        }
        .a44 span:nth-of-type(3){
            float: right;
        }
        .a55{
            width: 1222px;
            height: 275px;
            margin: 0px auto;
            background: antiquewhite;
        }
        .b55{
            height: 32px;
            color: white;
            background: black;
        }
        .b55 .left{
            float: left;
        }
        .b55 .right{
            float: right;
        }
        .b55 li{
            float: left;
        }
    </style>
</head>
<body>
    <div class="a11">
        <span class="left">三</span>
            <ul>
                <li>赞</li>
                <li>萌</li>
                <li>哈</li>
                <li>艹</li>
                <li>买</li>
            </ul>
            <span class="right">登录</span>
    </div>
    <div class="a22">
        <img src="s003.jpg" alt="" class="left">
        <ul class="b11">
            <li>
                <img src="s02.jpg" alt="">
                <p class="a1">想点亮圣诞气氛？试试这个[驯鹿灯]</p>
            </li>
            <li>
                <img src="s03.jpg" alt="">
                <p class="a2">Designer100,100个设计师，100个故事</p>
            </li>
            <li>
                <img src="s04.jpg" alt="">
                <p>旧椅子获新生，还比以前更炫酷了</p>
            </li>
        </ul>
    </div>
    <ul class="a33">
        <p class="b22">最新</p>
        <select name="" id="" class="b33">
            <option value="">全部排行榜</option>
            <option value="" selected>排行榜</option>
            <option value="">24小时排行榜</option>
            <option value="">本周排行榜</option>
            <option value="">本月排行榜</option>
        </select>
        <select name="" id="" class="b33">
            <option value="">排行榜</option>
            <option value="" selected>热议</option>
            <option value="">24小时排行榜</option>
            <option value="">本周排行榜</option>
            <option value="">本月排行榜</option>
        </select>
        <p class="b44">随机</p>
    </ul>
    <ul class="a44">
        <li>
            <img src="i01.jpg" alt="" class="">
            <P>用水才能擦去笔记，他只想保护好设计师的创意</P>
            <p>
                <span>2小时前</span>
                <span>3</span>
                <span>133</span>
            </p>
        </li>
        <li>
            <img src="i03.jpg" alt="">
            <p>健身也有【科技范】，你以为这仅仅是个瑜伽垫？</p>
            <p>
                <span>18小时前</span>
                <span>11</span>
                <span>407</span>
            </p>
        </li>
        <li>
            <img src="i05.jpg" alt="">
            <p>矮怎么了？照样能够拿到书架顶端的书</p>
                <p>
                    <span>15小时前</span>
                    <span>550</span>
                    <span>24</span>
                </p>
        </li>
        <li>
            <img src="i02.jpg" alt="">
            <p>马桶刷也要有优雅的姿态</p>
                <p>
                    <span>2小时前</span>
                    <span>100</span>
                    <span>7</span>
                </p>
        </li>
        <li>
            <img src="i04.jpg" alt="">
            <p>牙缝清洁怎么办？牙签牙线都过时了，用【刷子】刷吧</p>
                <p>
                    <span>16小时前</span>
                    <span>640</span>
                    <span>16</span>
                </p>
        </li>
        <li>
            <img src="i06.png" alt="">
            <p>这是一场关于肉体的盛宴，无关设计，无关时尚，无关商业....</p>
            <p>
                <span>15小时前</span>
                <span>1088</span>
                <span>21</span>
            </p>
        </li>
        <li>
            <img src="i09.jpg" alt="">
            <p>废纸打造的铅笔，像是一朵朵落入凡间的花</p>
                <p>
                    <span>2天前</span>
                    <span>533</span>
                    <span>34</span>
                </p>
        </li>
        <li>
            <img src="i07.png" alt="">
            <p>中国国际设计节PK世界工业设计大会，哪个更棒？</p>
            <p>
                <span>24小时前</span>
                <span>402</span>
                <span>10</span>
            </p>
        </li>
        <li>
            <img src="i07.jpg" alt="">
            <p>首届世界设计工艺大会开在家门口杭州，中国设计师们燥起来</p>
            <p>
                <span>20小时前</span>
                <span>300</span>
                <span>9</span>
            </p>
        </li>
        <li>
            <img src="i08.jpg" alt="">
            <p>窝在北方的暖炉里，你应该需要一个这样的散热阀门</p>
                <p>
                    <span>3天前</span>
                    <span>479</span>
                    <span>11</span>
                </p>
        </li>
        <li>
            <img src="i10.jpg" alt="">
            <p>依靠在毯子上，这件事听着就让人舒坦</p>
            <p>
                <span>1天前</span>
                <span>453</span>
                <span>19</span>
            </p>
        </li>
        <li>
            <img src="i11.jpg" alt="">
            <p>别笑话虚拟键盘没有实体按键，打字or音乐，他们说变就变</p>
            <p>
                <span>2天前</span>
                <span>540</span>
                <span>44</span>
            </p>
        </li>
    </ul>
    <p class="txt">太快了吧，慢慢来哈！</p>
    <div class="a55">
        <p>合作伙伴</p>
        <p>
            <img src="x01.png" alt="">
            <img src="x02.png" alt="">
            <img src="x03.png" alt="">
            <img src="x04.png" alt="">
            <img src="x05.png" alt="">
            <img src="x06.png" alt="">
            <img src="x07.jpg" alt="">
        </p>
        <p>友情链接</p>
        <p>
           <a href="">中国工业设计协会|</a>
           <a href="">网易家居|</a>
           <a href="">智东西|</a>
           <a href="">DRC北京工业设计创意产业基地|</a>
           <a href="">设计邦|</a>
           <a href="">凤凰家居|</a>
           <a href="">壹网空间|</a>
           <a href="">七牛云储存|</a>
           <a href="">Fotor|</a>
           <a href="">高清图片|</a>
    </div>
    <div class="b55">
        <ul class="left">
            <li>站点地图|</li>
            <li>工业设计导航|</li>
            <li>关于|</li>
            <li>合作|</li>
            <li>投稿|</li>
        </ul>
        <p class="right">
            ©设计癖
        </p>
    </div>
</body>
</html>